<template>
  <div class="mainDiv" style="overflow-x: hidden;">
      <el-row :gutter="10" class="plr10">
        <el-col :span="12">
          <el-input v-model="goods.name" class="mt" placeholder="请输入产品名称">
              <template slot="prepend">产品名称</template>
          </el-input>            
        </el-col>
        <el-col :span="12">
          <el-input v-model="goods.number" class="mt" placeholder="请输入产品编号">
              <template slot="prepend">产品编号</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="plr10">
        <el-col :span="12">
            <el-input v-model="goods.price" class="mt" placeholder="请输入标准价格">
                <template slot="prepend">标准价格</template>
            </el-input>          
        </el-col>
          <el-col :span="12">
            <el-input v-model="goods.nums" class="mt" placeholder="请输入商品库存">
              <template slot="prepend">商品库存</template>
            </el-input>              
        </el-col>
      </el-row>
      <el-row :gutter="10" class="plr10">
        <el-col :span="12">
            <el-input v-model="bname" class="mt" placeholder="请选择所属品牌" disabled>
                <template slot="prepend">所属品牌</template>
                <el-button slot="append" icon="el-icon-h-search" @click="selbran"></el-button>
            </el-input>          
        </el-col>
        <el-col :span="12">
            <el-input v-model="cname" class="mt" placeholder="请选择所属分类" disabled>
                <template slot="prepend">所属分类</template>
                <el-button slot="append" icon="el-icon-h-search" @click="selcate"></el-button>
            </el-input>
        </el-col>
      </el-row>


      <el-row class="plr10">
<el-alert
            title="设置产品的业绩和提成比，产品通常设置个正常销售的即可"
            type="warning"
            center
            show-icon>
          </el-alert>
<div style="padding:10px">
            <span style="color: #000;font-size: 14px;margin-right: 10px">业绩分类</span>
            <el-select style="width: 50%" v-model="selsubclass" multiple filterable allow-create @change="selectsubclass" @remove-tag="removetag"  placeholder="请选择项目下子类">
            <el-option v-for="(item,index) in cates" :label="item.name" :value="item.id" :key="index">
            </el-option>
        </el-select>
          </div>

        
        <div style="padding: 10px;display:flex;flex-wrap:wrap;justify-content: space-between;height: 400px;overflow: scroll;">
          <el-card class="box-card" v-for="(item, index) in subjectconfiglists" :key="index" style="width:49%;flex-shrink: 0;height:260px">
            <div slot="header" class="clearfix">
              <span>{{ item.name }}</span>
            </div>


            <el-row :gutter="10" style="display: flex;flex-direction: column">
                <div style="display: flex;color: #888888;padding: 10px;">
                  <span style="width: 45px;flex-shrink: 0;">业绩:</span>
                  <el-col :span="11">
                   <el-input v-model="item.xjyjpercent" placeholder="请输入现金业绩百分比(0-100)" size="mini">
                    <template slot="prepend">现金业绩百分比</template>
                  </el-input>
                    </el-col>
                    <el-col :span="11">
                    <el-input v-model="item.khyjpercent" placeholder="请输入卡耗业绩百分比(0-100)" size="mini">
                    <template slot="prepend">卡耗业绩百分比</template>
                  </el-input>
                    </el-col>
                </div>
                <el-alert
                  title="注：提成百分比是以分配的业绩为基数的，例如该条设置的业绩百分比为50%，提成百分比为50%，那么选择该条目的员工获取的提成为实际成交价 × 50% = 分配到的业绩 × 50% = 分配到的实际提成"
                  type="warning"
                  center
                  :closable="false"
                  show-icon>
                </el-alert>
                <div style="display: flex;color: #888888;padding: 10px;align-items: center;">
                  <span style="width: 45px;flex-shrink: 0;">提成:</span>
                  <el-col :span="11">
                    <el-radio-group v-model="item.xjtctype">
                    <el-radio :label="1">百分比</el-radio>
                    <el-radio :label="2">固额</el-radio>
                  </el-radio-group>
                  <el-input v-model="item.xjtcpercent" v-if="item.xjtctype==1" placeholder="请输入现金提成百分比(0-100)" size="mini">
                    <template slot="prepend">现金提成百分比</template>
                  </el-input>
                  <el-input v-model="item.xjtcfixed" v-else placeholder="请输入现金提成固额" size="mini">
                      <template slot="prepend">现金提成固额</template>
                  </el-input>
                  </el-col>
                  <el-col :span="11">
                    <el-radio-group v-model="item.khtctype">
                    <el-radio :label="1">百分比</el-radio>
                    <el-radio :label="2">固额</el-radio>
                  </el-radio-group>
                  <el-input v-model="item.khtcpercent" v-if="item.khtctype==1" placeholder="请输入卡耗提成百分比(0-100)" size="mini">
                    <template slot="prepend">卡耗提成百分比</template>
                  </el-input>
                  <el-input v-model="item.khtcfixed" v-else placeholder="请输入卡耗提成固额" size="mini">
                      <template slot="prepend">卡耗提成固额</template>
                  </el-input>
                  </el-col>
                 </div>
              </el-row>
          </el-card>
        </div>          
      </el-row>
      <el-row style="padding: 10px;">
        <el-col :span="12">
          <el-input type="textarea" v-model="goods.remarks" class="mt" placeholder="请输入产品描述"></el-input>
        </el-col>          
      </el-row>       
      <el-row :gutter="20" type="flex" justify="center">
          <el-col :span="10">
              <el-button @click.native="close" style="width: 100%;">取消</el-button>
          </el-col>
          <el-col :span="10">
              <el-button type="success" @click.native="submit" style="width: 100%;" :loading="loading">确定</el-button>
          </el-col>
      </el-row>
  </div>
</template>
<script>
import C from '@/common/common.js'
import Goods from '@/service/shop/goods.js'

export default {
  name: 'openAddShopGoods',
  data () {
    return {
      selsubclass: [],
      oldsubclass: [],
      cates: [],
      subjectconfiglists: [],
      oldsubjectconfiglists: [],
      goods: {
        id: 0,
        name: '',
        price: '',
        categoryid: 0,
        brandid: 0,
        remarks: '',
        nums: 0,
        number: ''
      },
      bname: '',
      cname: '',
      flag: true
    }
  },
  methods: {
    selcate: async function () {
      let res = await Goods.openGoodsCategoryList()
      if (res) {
        this.goods.categoryid = res.id
        this.cname = res.name
      }
    },
    selbran: async function () {
      let res = await Goods.openBrandList()
      if (res) {
        this.goods.brandid = res.id
        this.bname = res.name
      }
    },
    selectsubclass: async function (arr) {
      let addarr = this.filter(arr, this.oldsubclass)
      let reducearr = this.filter(this.oldsubclass, arr)
      let newArray = []
      if (addarr.length !== 0) {
        addarr.forEach((v, i) => {
          this.cates.every((k) => {
            if (k.id === v) {
              newArray.push({
                name: k.name,
                subjectchildclassid: v,
                xjyjpercent: '',
                xjtctype: 1,
                xjtcpercent: '',
                xjtcfixed: '',
                khyjpercent: '',
                khtctype: 1,
                khtcpercent: '',
                khtcfixed: ''
              })
              return false
            }
            return true
          })
        })
      }
      if (reducearr.length !== 0) {
        this.oldsubjectconfiglists.forEach((v, i) => {
          if (reducearr.indexOf(v.subjectchildclassid) !== -1) {
            this.oldsubjectconfiglists.splice(i, 1)
          }
        })
        this.oldsubclass.forEach((v, i) => {
          if (reducearr.indexOf(v) !== -1) {
            this.oldsubclass.splice(i, 1)
          }
        })
      }
      this.subjectconfiglists = this.oldsubjectconfiglists.concat(newArray)
    },
    async submit () {
      let that = this
      let xjyjsum = []
      let khyjsum = []
      if (/^\s*$/.test(that.goods.name)) {
        C.error('请输入产品名称')
        return false
      } else if (that.goods.number === '') {
        C.error('请输入产品编号')
        return false
      } else if (!/^[1-9]+\d*(\.)?\d*$/.test(that.goods.price * 1)) {
        C.error('请输入产品价格')
        return false
      } else if (that.goods.categoryid == 0) {
        C.error('请选择所属分类')
        return false
      } else if (that.goods.brandid == 0) {
        C.error('请选择所属品牌')
        return false
      }
      if (that.subjectconfiglists.length == 0) {
        C.error('请至少选择一个项目子类')
        return false
      }
      that.subjectconfiglists.every((v, i) => {
        if (!/^(\d|[1-9]\d|100)$/.test(v.xjyjpercent)) {
          C.error('请设置' + v.name + '现金业绩百分比(0-100)')
          that.flag = false
          return false
        }
        if (v.xjtctype == 1) {
          v.xjtcfixed = 0
          if (!/^(\d|[1-9]\d|100)$/.test(v.xjtcpercent)) {
            C.error('请设置' + v.name + '现金提成百分比(0-100)')
            that.flag = false
            return false
          }
        } else {
          v.xjtcpercent = 0
          if (!/^([1-9]\d*|0)(\.\d+)?$/.test(v.xjtcfixed)) {
            C.error('请设置' + v.name + '现金提成固额')
            that.flag = false
            return false
          }
        }
        if (!/^(\d|[1-9]\d|100)$/.test(v.khyjpercent)) {
          C.error('请设置' + v.name + '卡耗业绩百分比(0-100)')
          that.flag = false
          return false
        }
        if (v.khtctype == 1) {
          v.khtcfixed = 0
          if (!/^(\d|[1-9]\d|100)$/.test(v.khtcpercent)) {
            C.error('请设置' + v.name + '卡耗提成百分比(0-100)')
            that.flag = false
            return false
          }
        } else {
          v.khtcpercent = 0
          if (!/^([1-9]\d*|0)(\.\d+)?$/.test(v.khtcfixed)) {
            C.error('请设置' + v.name + '卡耗提成固额')
            that.flag = false
            return false
          }
        }
        xjyjsum.push(v.xjyjpercent)
        khyjsum.push(v.khyjpercent)
        that.flag = true
        return true
      })
      if (that.flag) {
        if (this.evil(xjyjsum.join('+')) !== 100) {
          C.error('现金业绩百分比之和必需为100')
          return false
        }
        if (this.evil(khyjsum.join('+')) !== 100) {
          C.error('卡耗业绩百分比之和必需为100')
          return false
        }
        let data = await C.ajax('/shop/goods/addedit', { subInfo: that.goods, subConfig: that.subjectconfiglists }, 'post')
        if (data) {
          if (data.errno === 0) {
            that.loading = false
            that.$notify({
              title: '成功',
              message: data.data,
              type: 'success'
            })
            C.closeBrowserWindow(data)
          } else {
            that.loading = false
            that.$notify.error({
              title: '错误',
              message: data.errmsg
            })
          }
        }
      }
    },
    getcates: async function () {
      let list = await C.ajax('/shop/goods/getgoodsChildClass')
      if (list) {
        this.cates = list
      }
    },
    getsubconfig: async function (id) {
      let list = await C.ajax('/shop/goods/getgoodsconfig', { subjectid: id }, 'post')
      if (list) {
        let newArray = []
        list.forEach((v, i) => {
          newArray.push(v.subjectchildclassid)
        })
        this.subjectconfiglists = list
        this.oldsubjectconfiglists = list
        this.selsubclass = newArray
        this.oldsubclass = newArray
      }
    },
    close () {
      C.closeBrowserWindow()
    },
    filter: function (arr1, arr2) {
      return arr1.filter((v) => {
        return arr2.indexOf(v) === -1
      })
    },
    evil: function (fn) {
      let Fn = Function
      return new Fn('return ' + fn)()
    }
  },
  mounted: function () {
    let row = C.getDatas()
    console.log(row)
    if (row && row.id) {
      this.goods.id = row.id
      this.goods.name = row.name
      this.goods.price = row.price
      this.goods.categoryid = row.categoryid
      this.goods.brandid = row.brandid
      this.goods.remarks = row.remarks
      this.goods.nums = row.nums
      this.goods.number = row.number
      this.bname = row.bname
      this.cname = row.cname
      this.getsubconfig(row.id)
    }
    this.getcates()
  }
}
</script>

<style>
.mt {
  margin: 10px 0;
}
.plr10 {
  padding: 0 10px;
}
.box-card {
  margin-top: 12px;
}
.el-card__header {
  padding: 8px 20px;
}
.el-card__body {
  padding-top: 0px;
}
.el-card__body .el-row {
  padding-top: 12px;
}
</style>